<template>
	<view>
				<scroll-view scroll-y="true" :style="{'height':wh+'px' }">
								<view class="details">
												<!-- 轮播图 -->
												<swiper class="swiper" autoplay="true" circular indicator-dots="true" interval="2000">
															<swiper-item 
																	v-for="(item,index) in detail.pics" 
																	:key="index"
																	>
																			<image @click="clickImage(index)" :src="item.pics_big" mode=""></image>
															</swiper-item>
												</swiper>
												<!-- 价格 -->
												<view class="price" v-if="detail.goods_price">
															¥{{detail.goods_price}}
												</view>
												<!-- 文本 -->
												<view class="text" v-if="detail.goods_price">
															<view class="title-box">
																		<view class="title">{{detail.goods_name}}</view>
																		<view class="sc" @click="addCollect">
																					<uni-icons v-if="isCollect" type="star-filled" size="36rpx" color="red"></uni-icons>
																					<uni-icons v-else type="star" size="36rpx" color="gray"></uni-icons>
																					<view class="" >
																								{{isCollect?'已收藏':'收藏'}}
																					</view>
																		</view>
															</view>
															<view class="yf">快递：免运费</view>
												</view>
												<!-- 图片详情 -->
												<view class="">
															<rich-text :nodes="detail.goods_introduce"></rich-text>
												</view>
												
												<!-- 底部 加入购物车 -->
												<view class="cart">
														<uni-goods-nav
																	:fill="true"  
																	:options="options" 
																	:button-group="buttonGroup"
																	@click="onClick" 
																	@buttonClick="buttonClick" />
												</view>
									
								</view>
				</scroll-view>
				
	</view>
</template>

<script>
	import { mapState,mapMutations,mapGetters } from 'vuex'
	
	export default {
		//获取vuex中的数据
		computed:{
			//使用辅助函数获取cart模块中的state中的cart数据
			...mapState('cart',['cart']),
			...mapGetters('cart',['total'])
		},
		// 从vuex的getters数据在watch中监听她的变化
		watch:{				
				total: {
					// handler 属性用来定义侦听器的 function 处理函数 
					handler(newVal) { 
						const findResult = this.options.find(x => x.text === '购物车') 
									if (findResult) {
												findResult.info = newVal 
									} 
							},
								// immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用 
								immediate: true ,
						}
		},
		data() {
			return {
				wh:0,
				isCollect:false,
				detail:{},
				cId:0,
				options: [{
							icon: 'shop',
							text: '店铺',
							infoBackgroundColor:'#007aff',
							infoColor:'red'
						}, {
							icon: 'cart',
							text: '购物车',
							info: 0
						}],
					    buttonGroup: [{
					      text: '加入购物车',
					      backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
					      color: '#fff'
					    },
					    {
					      text: '立即购买',
					      backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					      color: '#fff'
					    }]
			}
		},
		onLoad(options){
			//获取视口活动区 减去底部购物车的高度
			uni.getSystemInfo({
				 success:(res=>{
						this.wh = res.windowHeight - 50
				})
			})
			
			console.log(options)
			this.cId = options.cId
			this.getGoodsDetail()
		},
		methods:{
			...mapMutations('cart',['addToCart']),
			clickImage(index){
				uni.previewImage({
					current:index,//当前显示索引
					urls:this.detail.pics.map(item=>item.pics_big) //需要预览的图片url
				})
			},
			onClick (e) {
				const text = e.content.text 
				if(text=== '购物车'){
					uni.switchTab({ url:'/pages/cart/cart' })
				}
			},
			buttonClick (e) {
				console.log(e)
				const text = e.content.text 
				if(text==='加入购物车'){
								this.addToCart({
									// { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
									goods_id:this.detail.goods_id,
									goods_name:this.detail.goods_name,
									goods_price:this.detail.goods_price,
									goods_count:1,
									goods_small_logo:this.detail.goods_small_logo,
									goods_state:this.isCollect
								})
				}
				// this.options[1].info++
			},
			/**
			 * 获取商品详细列表
			 */
			async getGoodsDetail(){
				const { data:res }= await uni.$http.get('/api/public/v1/goods/detail',{ goods_id:this.cId })
				console.log(res)
				if(res.meta.status !== 200) return uni.$showMsg()
				this.detail = res.message
				//处理图片下面空白
				res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')
			},
			/**
			 * 点击收藏
			 */
			addCollect(){
					this.isCollect = !this.isCollect
					console.log('cart',this.cart)
					console.log('total',this.total)
			}
		}
	}
</script>

<style lang="scss">
	.cart{
			width:100%;
			position:fixed;
			bottom:0px;
	}
	.swiper{
		height: 700rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.price{
		color: #b02418;
		font-size: 44rpx;
		margin: 20rpx 0 0 20rpx;
	}
	.text{
		font-size: 28rpx;
		padding: 20rpx 0 20rpx 20rpx;
		.title-box{
			display: flex;
			margin-bottom: 20rpx;
			.title{
				width: 80%;
				padding-right: 20rpx;
				border-right:1px solid #e0e7ed;
			}
			.sc{
				flex-grow: 1;
				text-align: center;
				position: relative;
				
			}
		}
		.sc , .yf{
			font-size: 24rpx;
			color: #8f8f8f;
		}
		
	}
</style>
